<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #eeeeee;
			}
			#controls {
				/*position: absolute;*/
				/*left: 25px;
				top: 25px;*/
				margin-left: 5px;
				height: 60px;
			}
			#canvas {
				background: #ffffff;
				cursor: crosshair;
				margin-left: 0px;
				margin-top: 0px;
				-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
				-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
				-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
			}
			.bg {
				background: #ffffff;
				width: 600px;
				height: 880px;
				margin: 0 auto;
			}
			.wh {
				width: 80px;
			}
		</style>
	</head>
	<body>
		<div class="bg" id="bg">
			<canvas id="canvas" width="600" height="800"></canvas>
			<div id="controls">
				<div style="color: green;height: 30px;" id="message"></div>
				线颜色:
				<select id="strokeStyleSelect">
					<option value="grey">灰色</option>
					<option value="red">红色</option>
					<option value="green">绿色</option>
					<option value="blue">蓝色</option>
					<option value="orange">橘色</option>
				</select>
				
				辅助线:
				<input type="checkbox" name="guidewireCheckbox" id="guidewireCheckbox" value="" />
				<input type="button" name="eraseAllButton" id="eraseAllButton" value="清除" />
				<input type="button" name="angle" id="angle" value="计算角度" />
				<div>
					宽度：
					<input type="text" id="cwidth" value="800" class="wh" />
					高度：
					<input type="text" id="cheight" value="600" class="wh" />
					<input type="button" name="resetBoard" id="resetBoard" value="设置画板" />
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var eraseAllButton = document.getElementById("eraseAllButton");
		var btnAngle = document.getElementById("angle");
		var strokeStyleSelect = document.getElementById("strokeStyleSelect");
		var guidewireCheckbox = document.getElementById("guidewireCheckbox");
		var message = document.getElementById("message");
		var btnRestBoard = document.getElementById("resetBoard");
		var cwidth = document.getElementById("cwidth");
		var cheight = document.getElementById("cheight");
		var bg = document.getElementById("bg");


		var drawingSurfacsImageData = null;
		var mousedown = {};
		var rubberbandRect = {};
		var dragging = false;
		var guidewires = guidewireCheckbox.checked;
		var loc = null;

		var pointArr = new Array();

		//drawHorizontLine(0);
		//drawVerticalLine(0);
		//获取实际的鼠标在canvas的位置
		function windowToCanvas(x, y) {
			var bbox = canvas.getBoundingClientRect();
			return {
				x : x - bbox.left * (canvas.width / bbox.width),
				y : y - bbox.top * (canvas.height / bbox.width)
			};
		}
		//保存当前的canvas上的数据
		function saveDrawingSurface() {
			drawingSurfacsImageData = context.getImageData(0, 0, canvas.width, canvas.height);
		}
		//恢复canvas的数据，主要用来显示最新的线段，擦除原来的线段
		function restoreDrawingSurface() {
			context.putImageData(drawingSurfacsImageData,
					0, 0, 0, 0, canvas.width, canvas.height	
				);
		}
		
		//应该是计算需要偏移的量???不懂他要这个干嘛
		function updateRubberbandRectangle(loc) {
 
			rubberbandRect.width = Math.abs(loc.x - mousedown.x);
			rubberbandRect.height = Math.abs(loc.y - mousedown.y);
			if(loc.x > mousedown.x) {
				rubberbandRect.left = mousedown.x;
			} else {
				rubberbandRect.left = loc.x;
			}
			if(loc.y > mousedown.y) {
				rubberbandRect.top = mousedown.y;
 			} else {
				rubberbandRect.top = loc.y;
 			}
 			
 			message.innerHTML = "mousedown.x="+mousedown.x+",mousedown.y="+mousedown.y+",loc.x="+loc.x+",loc.y="+loc.y;
		}
		//更新
		function  updateRubberband(loc) {	
			//此处在《HTML5 canvas核心技术——图形、动画与游戏开发》一书中
			//updateRubberbandRectangle方法是没有注释的，但是我不懂要这个
			//方法有什么作用，注释之后也不影响，话说我也不用话什么矩形哇
			//有知道这个方法在这里是做什么的同学在下方评论一下告知哈
			// updateRubberbandRectangle(loc);
			drawRubberbandShape(loc);
		}
		//画最新的线条
		function drawRubberbandShape(loc) {
			context.beginPath();
			context.moveTo(mousedown.x, mousedown.y);
			context.lineTo(loc.x, loc.y);
			context.stroke();
		}
		//画横线，在y坐标上
		function drawHorizontLine(y) {
			context.beginPath();
			context.moveTo(0, y+0.5);
			context.lineTo(canvas.width, y+0.5);
			context.stroke();
		}
		//画竖线
		function drawVerticalLine(x) {
			context.beginPath();
			context.moveTo(x+0.5, 0);
			context.lineTo(x+0.5,canvas.height);
			context.stroke();
		}
		function drawGuidewires(x, y) {
			context.save();
			context.strokeStyle = "rgba(0,0,230, 0.4)";
			context.lineWidth = 0.5;
			drawHorizontLine(y);
			drawVerticalLine(x);
			context.restore();
		}
		// 计算角度
		function calculationAngle() {
			if (pointArr.length != 4) {
				message.innerHTML = "必须有两条线才能计算角度。";
				return;
			}
			// 计算两直线截距和斜率 斜率：k=(y2-y1)/(x2-x1)   截距：b = (x2*y1-x1*y2)/(x2-x1)
			// 第一条线
			var x1 = pointArr[0].x;
			var y1 = pointArr[0].y;
			var x2 = pointArr[1].x;
			var y2 = pointArr[1].y;
			var k1 = (y2 - y1) / (x2 - x1);
			var b1 = (x2 * y1 - x1 * y2) / (x2 - x1);
			// 第二条线
			x1 = pointArr[2].x;
			y1 = pointArr[2].y;
			x2 = pointArr[3].x;
			y2 = pointArr[3].y;
			var k2 = (y2 - y1) / (x2 - x1);
			var b2 = (x2 * y1 - x1 * y2) / (x2 - x1);
			// 求弧度，tan = |(k2 - k1) / (1 + k2 * k1)|
			var tan = Math.abs((k2 - k1) / (1 + k2 * k1));
			var result = Math.atan(tan) / (Math.PI / 180);
        	result = Math.round(result);
			message.innerHTML = "角度为：[" + result + "]，你猜对了没。注：只显示锐角和直角角度。";
		}

		canvas.onmousedown = function(e) {
			if (pointArr.length >= 4) {
				message.innerHTML = "已有两条线，请清除后重画。";
				return;
			}
			loc = windowToCanvas(e.clientX, e.clientY);
			
			e.preventDefault();
			saveDrawingSurface();
			mousedown.x = loc.x;
			mousedown.y = loc.y;
			pointArr.push({x: loc.x, y: loc.y});
			dragging = true;
		};
		canvas.onmousemove = function(e){
			if (pointArr.length >= 4) {
				return;
			}
			//判断当前是否用户在拖动
			if(dragging) {
				e.preventDefault();
				loc = windowToCanvas(e.clientX, e.clientY);
				
				restoreDrawingSurface();
				updateRubberband(loc);
				if(guidewires) {
					//如果选中的加入辅助线
					//这里的辅助线应该只有在鼠标那个地方才出现的
					drawGuidewires(loc.x, loc.y);
				}
			}
		};
		canvas.onmouseup = function(e) {
			if (pointArr.length >= 4) {
				return;
			}
			loc = windowToCanvas(e.clientX, e.clientY);
			restoreDrawingSurface();
			updateRubberband(loc);

			pointArr.push({x: loc.x, y: loc.y});
			//鼠标抬起，拖动标记设为否
			dragging = false;
		};
		eraseAllButton.onclick = function(e){
			message.innerHTML = "";
			pointArr.length = 0;
			context.clearRect(0, 0, canvas.width, canvas.height);
			saveDrawingSurface();
		};
		strokeStyleSelect.onchange = function(e){
			context.strokeStyle = strokeStyleSelect.value;
		};
		guidewireCheckbox.onchange = function(e){
			guidewires = guidewireCheckbox.checked;
		};
		btnAngle.onclick = function(e) {
			calculationAngle();
		}
		btnRestBoard.onclick = function(e) {
			canvas.width = cwidth.value;
			canvas.height = cheight.value;
			bg.style.width = cwidth.value + "px";
			bg.style.height = cheight.value + "px";
		    context = canvas.getContext("2d");
			context.strokeStyle = strokeStyleSelect.value;
		}
		context.strokeStyle = strokeStyleSelect.value;
		
	</script>
</html>